<template>
<div>
<div class="title">热销推荐</div>
<ul>
	<router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/' +item.id">
		<div class="item-img-wrapper">
			<img class="item-img" :src="item.imgUrl">
		</div>
		<div class="item-info">
			<p class="item-title">{{item.title}}</p>
			<p class="item-desc">{{item.desc}}</p>
			<button class="item-button">查看详情</button>
			
		</div>

	</router-link>
</ul>
</div>
</template>

<script>
export default {
	name:'HomeRecommend',
	props:{
		list:Array
	},
	data (){
		return {
			
		}
	}
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
 line-height:.8rem
 background:#eee
 padding-left:.1rem
.item

 height:1.9rem
 overflow:hidden
 display:flex
.item-img
 width:1.7rem
 height:1.7rem
 padding:.1rem
.item-info
 flex:1
 min-width:0
.item-title
 line-height:.54rem
 margin-top:.2rem
 ellipsis() 
.item-desc
 ellipsis() 
.item-button
 background:#ff9300
 margin-top:.2rem
 border-redius:.1rem
 color:white
 width:1.5rem
</style>